<template>
	<view>
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
			mode="aspectFill"></image>
		<z-paging ref="paging" :refresher-enabled="false">
			<uv-navbar slot="top" autoBack bgColor="rgba(0,0,0,0)" :fixed="false" title=" "></uv-navbar>

			<view class="login-title">欢迎登录</view>
			<view class="login-desc">未注册的手机号将自动创建为账号</view>
			<view class="login-box">
				<view class="login-data-box">
					<view class="login-item">
						<view class="login-item-title">手机号</view>
						<view class="login-item-input-box">
							<input maxlength="11" type="number" v-model="loginData.phone" placeholder-class="placeholder-class"
								placeholder="请输入手机号" class="login-item-input" />
						</view>
					</view>
					<view class="login-item">
						<view class="login-item-title">验证码</view>
						<view class="login-item-input-box" style="padding-right: 0">
							<input type="digit" v-model="loginData.codeNum" maxlength="6" placeholder-class="placeholder-class"
								placeholder="请输入验证码" class="login-item-input-code" />
							<view @click="smsCodeClick" class="login-item-code-btn" :style="smsNum > 0 ? 'opacity: .7;' : ''">
								{{ smsNum > 0 ? smsNum + 'S后可获取' : '获取验证码' }}
							</view>
						</view>
					</view>
				</view>
				<uv-button type="primary" text="登 录" customTextStyle="font-weight: 500;font-size: 36rpx;color: #FFFFFF;"
					customStyle="margin: 200rpx 55rpx 50rpx;width: 580rpx;height: 112rpx;background: #3B75FF;border-radius: 14rpx;"
					@click="submitFunc"></uv-button>
			</view>
		</z-paging>

		<!-- 头像昵称弹窗 -->
		<uv-popup ref="userDataPopup" @change="" round="20">
			<view class="userData-box">
				<view class="userData-box-title">
					<image src="../../static/logo.png" class="userData-box-title-icon"></image>
					<view class="userData-box-title-text">
						全能狮
						<text class="text">申请</text>
					</view>
				</view>
				<view class="userData-box-title-desc">获取你的昵称、头像</view>
				<view class="choose-avatar">
					<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<image class="avater" mode="aspectFill" :src="loginData.userImg"></image>
						<view class="userImg-text">点击选择头像</view>
					</button>
				</view>
				<view class="choose-avatar">
					<input class="userName-text" type="nickname" name="nickname" v-model="loginData.userName"
						placeholder="请输入昵称" />
				</view>
				<view class="btn-box">
					<uv-button @click="cancelFunc" customStyle="width:300rpx;border:1rpx solid #f2f2f2;" type=""
						text="暂不选择"></uv-button>
					<uv-button @click="qrLoginFunc" customStyle="width:300rpx;" type="primary" text="确 定"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		array,
		object,
		mobile,
		empty
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';

	export default {
		data() {
			return {
				loginData: {
					phone: '',
					codeNum: '',
					userImg: '',
					userName: ''
				},
				smsNum: '',

			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			console.log(userInfo, 'userInfo');
			// 如果openid不存在  请求
			if (!userInfo) {
				this.wxGetOpenId();
				return;
			}
			if (!userInfo.openid) {
				this.wxGetOpenId();
				return;
			}
		},
		methods: {
			wxGetOpenId() {
				uni.showLoading({
					mask: true
				});
				uni.login({
					timeout: 5000,
					success(login) {
						this.$Api.wxGetOpenId({
							code: login.code,
							openid: ''
						}).then((res) => {
							console.log(res, 'openid');
							uni.hideLoading();
							if (res.code == 200) {
								uni.setStorageSync('userInfo', res.data);
							}
						}).catch((err) => {
							console.log(err);
							uni.hideLoading();
						});
					},
					fail(err) {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			smsCodeClick() {
				if (this.smsNum != 0) {
					uni.showToast({
						title: '请勿频繁操作',
						icon: 'error'
					});
					return;
				}
				let {
					phone,
					codeNum
				} = this.loginData;
				console.log(phone, '手机号');
				if (!mobile(phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'error'
					});
					return;
				}
				uni.showLoading({
					mask: true
				});
				this.$Api.wxPhoneSendSms({
					phone
				}).then((res) => {
					console.log(res, '获取验证码');
					uni.hideLoading();
					if (res.code == 200) {}
				}).catch((err) => {
					uni.hideLoading();
				});
				this.smsNum = 60;
				let Interval = setInterval(() => {
					this.smsNum--;
					if (this.smsNum < 1) {
						clearInterval(Interval);
					}
				}, 1000);
			},
			submitFunc() {
				let tabActive = this.tabActive;
				let {
					phone,
					codeNum
				} = this.loginData;
				if (!mobile(phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'error'
					});
					return;
				}
				if (empty(codeNum)) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'error'
					});
					return;
				}
				this.$refs.userDataPopup.open('bottom');
			},
			chooseavatar(e) {
				console.log(e, 'asdasd');
				this.loginData.userImg = e.detail.avatarUrl;
			},
			cancelFunc() {
				let {
					phone,
					codeNum,
					userImg,
					userName
				} = this.loginData;
				this.wxLogin({
					phone,
					sms_code: codeNum,
					type: 1,
					head_image: '',
					nickname: ''
				});
			},
			qrLoginFunc() {
				let {
					phone,
					codeNum,
					userImg,
					userName
				} = this.loginData;
				if (!userImg) {
					uni.showToast({
						title: '请选择头像',
						icon: 'error'
					});
					return;
				}
				if (!userName) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'error'
					});
					return;
				}
				uni.showLoading({
					mask: true,
					title: '头像上传中...'
				});
				this.$upload([{
					url: userImg
				}]).then((res) => {
					console.log(res, '文件上传');
					uni.hideLoading();
					this.wxLogin({
						phone,
						sms_code: codeNum,
						type: 1,
						head_image: res.arrResult[0].file_url,
						nickname: userName
					});
				}).catch((err) => {
					uni.hideLoading();
				});
			},

			wxLogin(obj) {
				uni.showLoading({
					mask: true,
					title: '登录中...'
				});
				let userInfo = uni.getStorageSync('userInfo');
				console.log(userInfo, 'userInfo');
				obj.openid = userInfo.openid; //userInfo.openid
				this.$Api.wxLogin(obj).then((res) => {
					uni.hideLoading();
					console.log(res, '登录');
					if (res.code == 200) {
						res.data.openid = userInfo.openid;
						res.data.empower = 1;
						uni.setStorageSync('userInfo', res.data);
						uni.navigateTo({
							url: '/pages/authorize/authorize'
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.$refs.userDataPopup.close();
					}
				}).catch((err) => {
					console.log(err, '错误');
					uni.hideLoading();
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
					this.$refs.userDataPopup.close();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>